<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>系统公告</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../../../lib/layui-v2.5.5/css/layui.css" media="all">
		<link rel="stylesheet" href="../../../css/public.css" media="all">
	</head>
	<body>
		<div class="layuimini-container">
			<div class="layuimini-main">
				<!--搜索开始-->
				<fieldset class="layui-elem-field layuimini-search">
					<legend>搜索信息</legend>
					<div style="margin: 10px 10px 10px 10px">
						<form class="layui-form layui-form-pane" action="" id="searchFrm">
							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label">公告标题</label>
									<div class="layui-input-inline">
										<input type="text" name="title" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">发布人</label>
									<div class="layui-input-inline">
										<input type="text" name="opername" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">开始时间</label>
									<div class="layui-input-inline">
										<input type="text" name="startTime" id="startTime" readonly="readonly" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">结束时间</label>
									<div class="layui-input-inline">
										<input type="text" name="endTime" id="endTime" readonly="readonly" autocomplete="off" class="layui-input">
									</div>
								</div>
							</div>
							<div class="layui-form-item">
								<div class="layui-block" style="text-align: center;">
									<a class="layui-btn " lay-submit="" lay-filter="data-search-btn"><label class="layui-icon layui-icon-search"></label>搜索</a>
									<a class="layui-btn layui-btn-warm" onclick="javascript:$('#searchFrm')[0].reset()" lay-filter="data-search-btn"><label
										 class="layui-icon layui-icon-refresh"></label>重置</a>
								</div>
							</div>
						</form>
					</div>
				</fieldset>
				<!--搜索结束-->

				<!--表格开始-->
				<table class="layui-hide" id="noticeTable" lay-filter="noticeTable"></table>
				<script type="text/html" id="noticeToolBar">
					<a class="layui-btn layui-btn-sm" lay-event="add">添加</a>
            <a class="layui-btn layui-btn-sm layui-btn-danger data-count-delete" lay-event="batchdelete">批量删除</a>
        </script>
				<script type="text/html" id="noticeTableBar">
					<a class="layui-btn layui-btn-xs layui-btn-warm data-count-delete" lay-event="update">修改</a>
		    <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
			<a class="layui-btn layui-btn-xs layui-btn-warm data-count-delete" lay-event="show">查看</a>
		</script>
				<!--表格结束-->

				<!--添加和修改的弹出层开始-->
				<div id="addOrUpdateDiv" style="display: none;padding: 0.3125rem">
					<form method="post" class="layui-form layui-form-pane" lay-filter="dataFrm" id="dataFrm">
						<div class="layui-form-item">
							<label class="layui-form-label">标题</label>
							<div class="layui-input-block">
								<input type="hidden" name="id" />
								<input type="text" name="title" lay-verify="required" autocomplete="off" placeholder="请输入标题" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item">
							<!-- <div class="layui-form-label">公告内容</div> -->
							<div id="content" name="content" style="margin: 50px 0 50px 0">
								<p>嘻嘻</p>
							</div>
						</div>
						<div class="layui-form-item">
							<div class="layui-input-block" style="text-align: center;">
								<a class="layui-btn " lay-submit="" lay-filter="doSubmit"><label class="layui-icon layui-icon-release"></label>提交</a>
								<a class="layui-btn layui-btn-warm" onclick="javascript:$('#dataFrm')[0].reset()" lay-filter="data-search-btn"><label
									 class="layui-icon layui-icon-refresh"></label>重置</a>
							</div>
						</div>
					</form>
				</div>
				<!--添加和修改的弹出层结束-->
			</div>
		</div>
		<script src="../../../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
		<script src="../../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
		<script src="../../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
		<script src="../../../lib/jq-module/jquery.particleground.min.js" charset="utf-8"></script>
		<script src="../../../lib/common/jquery.cookie.min.js" charset="utf-8"></script>
		<script src="../../../lib/common/common.js" charset="utf-8"></script>

		<script>
			layui.use(['form', 'table', 'laydate', 'layer', 'wangEditor'], function() {
				var form = layui.form;
				var table = layui.table;
				var laydate = layui.laydate;
				var layer = layui.layer;
				var wangEditor = layui.wangEditor;

				//渲染时间选择器
				laydate.render({
					elem: '#startTime',
					type: 'datetime'
				});
				laydate.render({
					elem: '#endTime',
					type: 'datetime'
				});

				var tableIns = table.render({
					elem: '#noticeTable',
					url: api + 'notice/loadAllNotice',
					toolbar: "#noticeToolBar",
					cellMinWidth: true,
					cols: [
						[{
								type: "checkbox",
								fixed: "left"
							},
							{
								field: 'id',
								title: 'ID',
								align: "center"
							},
							{
								field: 'title',
								title: '公告标题',
								align: "center"
							},
							{
								field: 'createtime',
								title: '发布时间',
								align: "center"
							},
							{
								field: 'opername',
								title: '发布人',
								align: "center"
							},
							{
								title: '操作',
								templet: '#noticeTableBar',
								fixed: "right",
								align: "center"
							}
						]
					],
					page: true
				});

				// 监听搜索操作
				form.on('submit(data-search-btn)', function(data) {
					var params = $("#searchFrm").serialize();
					//执行搜索重载
					table.reload('noticeTable', {
						page: {
							curr: 1
						},
						url: api + 'notice/loadAllNotice?' + params
					});
					return false;
				});

				//监听表头的事件
				table.on('toolbar(noticeTable)', function(obj) {
					var checkStatus = table.checkStatus(obj.config.id);
					switch (obj.event) {
						case 'batchdelete':
							batchdelete();
							break;
						case 'add':
							openAddNotice();
							break;
					};
				});

				//监听行数据的事件
				table.on('tool(noticeTable)', function(obj) {
					var data = obj.data;
					if (obj.event === 'delete') {
						layer.prompt({
							formType: 1,
							value: '',
							maxlength: 6, //可输入文本的最大长度，默认500
							title: '敏感操作，请输入口令'
						}, function(value, index, elem) {
							if (value == 'yby123') {
								$.post(api + "notice/deleteNotice", {
									id: data.id
								}, function(res) {
									layer.msg(res.msg);
									obj.del();
									layer.close(index);
								})
							} else {
								layer.msg("口令错误");
							}
						});

					} else if (obj.event === 'update') {
						openUpdateNotice(data);
					} else if (obj.event === 'show') {
						showNotice(data);
					}
				});

				//打开添加公告的弹层
				var mainIndex;
				var url; //动态的url
				function openAddNotice() {
					mainIndex = layer.open({
						type: 1,
						title: '添加公告',
						content: $("#addOrUpdateDiv"),
						area: ['800px', '600px'],
						success: function(index) {
							url = api + "notice/addNotice";
							//重置表单
							$("#dataFrm")[0].reset();
							editor.txt.html("");
						}
					});
				}

				// 修改窗体
				function openUpdateNotice(data) {
					mainIndex = layer.open({
						type: 1,
						title: '修改[' + data.title + ']公告',
						content: $("#addOrUpdateDiv"),
						area: ['800px', '600px'],
						success: function(index) {
							url = api + "notice/updateNotice";
							//装载数据表格
							form.val("dataFrm", data);
							//设置富文本的内容
							editor.txt.html(data.content);
						}
					});
				}

				//提交数据
				form.on("submit(doSubmit)", function(data) {
					var btn = $(this);
					btn.text("提 交 中...").attr("disabled", "disabled").addClass("layui-disabled");
					var params = $("#dataFrm").serialize();
					var content = editor.txt.html();
					params += "&content=" + content;
					$.post(url, params, function(res) {
						layer.msg(res.msg);
						if (res.code == 200) {
							btn.text("提交").attr("disabled", "").removeClass("layui-disabled");
							tableIns.reload();
						}
						layer.close(mainIndex);
					})
					return false;
				})


				//批量删除
				function batchdelete() {

					var checkStatus = table.checkStatus('noticeTable'); //idTest 即为基础参数 id 对应的值
					var data = checkStatus.data;
					var length = checkStatus.data.length;
					console.log(checkStatus.data) //获取选中行的数据
					console.log(checkStatus.data.length) //获取选中行数量，可作为是否有选中行的条件
					if (length == 0) {
						layer.msg("请选中要删除的行数据");
					} else {
						layer.prompt({
							formType: 1,
							value: '',
							maxlength: 6, //可输入文本的最大长度，默认500
							title: '敏感操作，请输入口令，防止杂毛'
						}, function(value, index, elem) {
							if (value == 'yby123') {
								var params = "";
								$.each(data, function(index, item) {
									if (index == 0) {
										params += "ids=" + item.id;
									} else {
										params += "&ids=" + item.id;
									}
								});
								$.post(api + "notice/batchDeleteNotice", params, function(res) {
									layer.msg(res.msg);
									tableIns.reload();
									layer.close(index);
								});
							} else {
								layer.msg("口令错误");
							}
						});
					}
				}


				//查看公告
				function showNotice(data) {
					var title = data.title;
					var content = data.content;
					var noticeTime = data.createtime;
					var opername = data.opername;
					var html =
						'<div style="padding:15px 20px; height:100%;text-align:justify; line-height: 22px;border-bottom:1px solid #e2e2e2;background-color: #2f4056;color: #ffffff">\n' +
						'<div style="text-align: center;margin-bottom: 20px;font-weight: bold;border-bottom:1px solid #718fb5;padding-bottom: 5px"><h4 class="text-danger">' +
						title + '</h4></div>\n' +
						'<div style="font-size: 12px">' + content + '</div>\n' +
						'</div>\n';
					parent.layer.open({
						type: 1,
						title: '系统公告' + '<span style="float: right;right: 1px;font-size: 12px;color: #b1b3b9;margin-top: 1px">发布时间:' +
							noticeTime + ' 发布人:' + opername + '</span>',
						area: ["800px;", "800px"],
						shade: 0.8,
						btn: ['关闭'],
						btnAlign: 'c',
						moveType: 1,
						content: html
					});
				}


				//初始化富文本
				var editor = new wangEditor('#content');
				// editor.text.htmlText ="公告内容";

				// 自定义处理粘贴的文本内容
				editor.customConfig.pasteTextHandle = function(content) {
					// content 即粘贴过来的内容（html 或 纯文本），可进行自定义处理然后返回
					return content +
						`<p><br></p><p><span style="color: rgb(194, 79, 74);">
								作者：杨不易 <br>
								链接：https://www.yangbuyi.top/ <br>
								来源：前后端分离 <br>
								著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。`
				}

				editor.customConfig.uploadImgServer = api + "file/uploadFileWang";
				editor.customConfig.uploadFileName = 'mf';
				editor.customConfig.uploadImgParams = {
				    // 如果版本 <=v3.1.0 ，属性值会自动进行 encode ，此处无需 encode
				    // 如果版本 >=v3.1.1 ，属性值不会自动 encode ，如有需要自己手动 encode
				    token: token
				}
				editor.customConfig.uploadImgHooks = {
					success: function(xhr, editor, result) {
						// 图片上传并返回结果，图片插入成功之后触发
						// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
						console.log(result);
					},
					customInsert: function (insertImg, result, editor) {
					        // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
					        // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
					
					        // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
					        var url = result.src
					        insertImg(url)
					
					        // result 必须是一个 JSON 格式字符串！！！否则报错
					    }
				};
				
				editor.create();

			});
		</script>
		<script>

		</script>

	</body>
</html>
